<template>
  <div class="goodsinfo">
    <!-- 商品轮播图 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <mt-swipe :auto="4000">
            <mt-swipe-item v-for="(item, index) in lunbotuList" :key="index">
              <img :src="item.src" alt>
            </mt-swipe-item>
          </mt-swipe>
        </div>
      </div>
    </div>
    <!-- 商品购买 -->
    <div class="mui-card">
      <div class="mui-card-header">{{goodsinfo.title}}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
         <p>
             市场价: <del>￥{{goodsinfo.market_price}}</del> &nbsp;&nbsp;&nbsp;销售价: <span class="now">￥{{goodsinfo.sell_price}}</span>
         </p>
         <p>购买数量<numberbox></numberbox></p>

         <mt-button type='primary' size="small">立即购买</mt-button>
         <mt-button type='danger' size="small">加入购物车</mt-button>
        </div>
      </div>
    </div>

    <!-- 商品参数 -->
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
            <p>商品货号:{{goodsinfo.goods_no}}</p>
            <p>库存情况:{{goodsinfo.stock_quantity}}</p>
            <p>上架时间:{{goodsinfo.add_time|timeFormat('YYYY-MM-DD')}}</p>
        </div>
      </div>
      <div class="mui-card-footer">
          <mt-button size="large" type="primary" plain @click="goDesc(id)">图文介绍</mt-button>
          <mt-button size="large" type="danger" plain  @click="goComment(id)">商品评论</mt-button>
      </div>
    </div>
  </div>
</template>
<script>
import numberbox from '../subcompents/goodsNumber'
export default {
   
  data() {
    return {
      id: this.$route.params.id,
      lunbotuList: [],
      goodsinfo:{}
    };
  },
  methods: {
    getLubotu() {
      this.$http.get("api/getthumimages/" + this.id).then(function(res) {
        if (res.body.status == 0) {
          this.lunbotuList = res.body.message;
        }
      });
    },
    getGoodsInfo(){
        this.$http.get('api/goods/getinfo/'+this.id).then(function(res){
            if(res.body.status==0){
                this.goodsinfo=res.body.message[0]
            }
        })
    },
    goDesc(id){
        this.$router.push({name:'goodsdesc',params:{id:id}})
    },
    goComment(id){
        this.$router.push({name:'goodscomment',params:{id:id}})
    }
  },
  created() {
    this.getLubotu();
    this.getGoodsInfo()
  },
  components:{
      numberbox
  }
};
</script>   
<style lang="scss" scoped>
.goodsinfo {
  background-color: #ccc;
}
.mint-swipe {
  height: 200px;
  text-align: center;
  img {
    width: 200px;
  }
}
.now{color: red;font-weight: 800;font-size: 14px;}
.mui-card-footer{display: block;}
.mint-button--primary.is-plain{margin-bottom: 10px;}
</style>
